<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2022-03-22 17:34:08
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-04-06 16:39:34
 * @FilePath: \visitor_management\src\components\Toast.vue
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :title="title"
    :append-to-body="true"
    width="520px"
    :before-close="cancel"
  >
    <div class="content d-flex jc-center ai-center">
      <el-form
        ref="form"
        v-if="step === 0"
        :model="formData"
        inline
        @submit.native.prevent
      >
        <el-form-item :label="$t('common.curuser_pwd')">
          <PasswordInput
            @keyup.enter.native="confirm"
            v-model="formData.curuser_pwd"
          />
        </el-form-item>
      </el-form>
      <div v-else>{{ $t('common.zipPwd') }}: {{ zippasswd }}</div>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton class="cancel" @click="cancel">{{
        $t("common.cancel")
      }}</MyButton>
      <MyButton class="confirm" @click="confirm">{{
        $t("common.confirm")
      }}</MyButton>
    </div>
  </el-dialog>
</template>

<script>
import MyButton from "@/components/Button";
import PasswordInput from "@/components/input/Password";
import EnterPassword from "@/components/dialog/EnterPassword";
export default {
  extends: EnterPassword,
  components: { MyButton, PasswordInput },
  props: {
    zippasswd: {
      type: String,
      default: "",
    },
    step: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    title() {
      return this.zippasswd ? this.$t('common.zipPwd') : this.$t('common.downloadUrl');
    },
  },
};
</script>
<style lang="less" scoped>
.toast-dialog {
  .content {
    width: 100%;
  }
}
</style>
